/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { Modal, Spin, Row, Table, Button } from 'antd';
import StandardTable from '@/components/StandardTable';
import DescriptionList from '@/components/DescriptionList';
import { getArryStringBySymbol } from '@/utils/utils';

const { Description } = DescriptionList;

@connect(({ publicdata, loading, login }) => ({
  login,
  insUpdateData: publicdata.insInfo, // 单立户
  pageRatioData: publicdata.pageRatioData, // 企业工伤比例数据
  biglibraryData: publicdata.insBigInfo, // 大库
  loading:
    loading.effects['publicdata/fetchInsDetailInfo'] ||
    loading.effects['publicdata/fetchDetailInforPage'],
}))
class InsModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      userType: 1,
      custInsAccoId: null,
      payWay: null, // 区分是单立户或者大库 (缴费方式)
      insPkgList: null,
      respList: null,
      insKinds: null,
    };
  }

  componentDidMount() {
    const {
      onRef,
      login: { systemList },
    } = this.props;
    onRef(this);
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
    });
    this.setState({ userType });
  }

  // 获取社保账户详情信息
  getInsDetail = (custInsAccoId, payWay) => {
    const { dispatch } = this.props;
    if (!custInsAccoId) {
      return;
    }
    this.setState({ modalVisible: true, custInsAccoId, payWay });
    if (payWay === 1) {
      // 单立户
      dispatch({
        type: 'publicdata/fetchInsDetailInfo',
        payload: {
          custInsAccoId,
        },
      }).then(response => {
        if (response.success && response.data) {
          if (response.data.respList && response.data.respList.length) {
            response.data.respNameList = getArryStringBySymbol(response.data.respList, 'respName');
          } else {
            response.data.respNameList = '全部';
          }
        }
      });
      // 获取企业工伤比例 （单立户）
      this.geTratioVal(1, 10, custInsAccoId);
    } else {
      // 大库
      dispatch({
        type: 'publicdata/fetchDetailInforPage',
        payload: {
          insAccoId: custInsAccoId,
        },
      }).then(response => {
        if (response.success && response.data) {
          let insPkgArr = '';
          if (response.data.insPkgList.length) {
            response.data.insPkgList.forEach(c => {
              insPkgArr += `${c.insLsPkgName},`;
            });
          }
          insPkgArr = insPkgArr.slice(0, insPkgArr.length - 1);
          let respListArr = '';
          if (response.data.respList.length) {
            response.data.respList.forEach(c => {
              respListArr += `${c.respName},`;
            });
          }
          respListArr = respListArr.slice(0, respListArr.length - 1);
          let insArr = '';
          if (response.data.insKindsList.length) {
            response.data.insKindsList.forEach(c => {
              insArr += `${c.insKindName},`;
            });
          }
          this.setState({
            insPkgList: insPkgArr,
            respList: respListArr,
            insKinds: insArr,
          });
        }
      });
    }
  };

  // 获取企业工伤比例 （单立户）
  geTratioVal = (currentPage = 1, pageSize = 10, custInsAccoId) => {
    const { dispatch } = this.props;
    const pageArg = {
      currentPage,
      pageSizes: pageSize,
    };
    const params = {
      custInsAccoId,
      pageArg,
      orderBy: 'CRE_TIME DESC',
    };
    dispatch({
      type: 'publicdata/fetchInjRatioPage',
      payload: params,
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { custInsAccoId } = this.state;
    this.geTratioVal(pagination.current, pagination.pageSize, custInsAccoId);
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  render() {
    const { modalVisible, userType, payWay, insPkgList, respList, insKinds } = this.state;
    const { insUpdateData, loading = false, pageRatioData, biglibraryData } = this.props;
    const columns = [
      {
        title: '开始年月',
        dataIndex: 'beginYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (text && `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`) || '--',
      },
      {
        title: '企业工伤比例(%)',
        dataIndex: 'ratioVal',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => ((text || text === 0) && text) || '--',
      },
    ];
    return (
      <Modal
        width={1200}
        title="社保账户"
        visible={modalVisible}
        footer={[
          <Button type="primary" onClick={() => this.handleModalVisible(false)}>
            关闭
          </Button>,
        ]}
        onCancel={() => this.handleModalVisible(false)}
        destroyOnClose
      >
        <Spin tip="loading..." spinning={loading}>
          {payWay === 1 ? (
            <div>
              <DescriptionList>
                <Description term="客户名称 ">{insUpdateData.custName || '--'}</Description>
                <Description term="社保账户名称">{insUpdateData.accoName || '--'}</Description>
                <Description term="统一社会信用代码">
                  {insUpdateData.uniCreditCode || '--'}
                </Description>
                <Description term="地区">{insUpdateData.areaName || '--'}</Description>
                <Description term="单位名称">{insUpdateData.orgName || '--'}</Description>
                <Description term="所属社保机构">{insUpdateData.insOrg || '--'}</Description>
                <Description term="支付方式">{insUpdateData.payWayName || '--'}</Description>
                <Description term="银行账户信息">{insUpdateData.custBankAcc || '--'}</Description>
                <Description term="是否开户完成">{insUpdateData.doneFlagName || '--'}</Description>
                <Description term="缴纳险种">{insUpdateData.insKindNames || '--'}</Description>
                <Description term="社保组合">{insUpdateData.plcyName || '--'}</Description>
                {userType === 4 && (
                  <Description term="申报负责人">{insUpdateData.respNameList || '--'}</Description>
                )}
                <Description term="备注">{insUpdateData.remark || '--'}</Description>
              </DescriptionList>
              <Row style={{ marginTop: 24 }}>
                <StandardTable
                  selectedRows={[]}
                  selectedRowKeys={[]}
                  rowSelection={null}
                  loading={loading}
                  data={pageRatioData}
                  rowKey="insInjRatioId"
                  columns={columns}
                  onChange={this.handleStandardTableChange}
                />
              </Row>
            </div>
          ) : (
            <div>
              <DescriptionList>
                <Description term="大库名称 ">{biglibraryData.accoName || '--'}</Description>
                <Description term="公司名称">{biglibraryData.unitName || '--'}</Description>
                <Description term="统一社会信用代码">
                  {biglibraryData.uniCreditCode || '--'}
                </Description>
                <Description term="开户地区">{biglibraryData.areaName || '--'}</Description>
                <Description term="所属社保机构">{biglibraryData.insBur || '--'}</Description>
                <Description term="缴纳险种">{insKinds}</Description>
                <Description term="社保组合">{insPkgList}</Description>
                <Description term="开户行">{biglibraryData.custBankName || '--'}</Description>
                <Description term="银行账号">{biglibraryData.custBankId || '--'}</Description>
                {Number(userType) === 2 ? (
                  <Description term="备注">{biglibraryData.remark || '--'}</Description>
                ) : (
                  <div>
                    <Description term="申报负责人">{respList}</Description>
                    <Description term="备注">{biglibraryData.remark || '--'}</Description>
                  </div>
                )}
              </DescriptionList>
              <Row style={{ marginTop: 24 }}>
                <Table
                  columns={columns}
                  dataSource={biglibraryData.injRatioList || []}
                  pagination={false}
                />
              </Row>
            </div>
          )}
        </Spin>
      </Modal>
    );
  }
}
export default InsModal;
